<template>
  <div>
    <!-- 搜索框 -->
    <el-card>
      <el-form inline :model="formData" :rules="rules" ref="ruleForm">
        <el-form-item prop="username">
          <el-input v-model="formData.username" placeholder="请输入用户名" :validate-event="false" />
        </el-form-item>
        <!-- 查询与重置的按钮 -->
        <el-button type="primary" icon="el-icon-search" @click="getOrder(formData.username)">查询</el-button>
        <el-button type="default" @click="clear">重置</el-button>
      </el-form>
    </el-card>
    <!-- 订单列表 -->
    <el-card style="margin-top: 20px">
      <el-table :data="userOrders" stripe border empty-text="暂无订单信息" style="width: 100%">
        <el-table-column prop="add_time" label="创建时间" width="180"> </el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="180"> </el-table-column>
        <el-table-column label="订单价格" width="140">
          <template v-slot="{ row }">
            <span>{{ row.price.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="category_count" label="商品种类" width="140"> </el-table-column>
        <el-table-column prop="goods_count" label="商品数量" width="140"> </el-table-column>
        <el-table-column label="订单状态" width="140">
          <template v-slot="{ row }">
            <span>{{ row.order_state }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <!-- 发货 -->
            <el-button slot="reference" type="primary" size="mini" icon="el-icon-s-promotion" :disabled="row.order_state !== '待发货'" @click="deliverGoods(row.order_number)">发货</el-button>
            <!-- 退款 -->
            <el-button slot="reference" type="warning" size="mini" icon="el-icon-refresh" :disabled="row.order_state !== '待退款'" @click="returnMoney(row.order_number, row.goods)">退款</el-button>
            <!-- 查看 -->
            <el-button slot="reference" type="info" size="mini" icon="el-icon-info" @click="showOrderDetail(row)"></el-button>
            <!-- 删除 -->
            <el-popconfirm :title="`确定删除该订单吗?`" @onConfirm="deleteOrder(row.order_number)" style="margin-left: 10px">
              <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete"></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 订单详情dialog弹框 -->
    <el-dialog title="订单详情" :visible.sync="showDialog" width="60%">
      <div class="order-info">
        <span class="order-info1"><b>用户名：</b>{{ orderDetail.username }}</span>
        <span class="order-info2"><b>用户账号：</b>{{ orderDetail.user_id }}</span>
        <span class="order-info3"> </span>
      </div>
      <div class="order-info">
        <span class="order-info1"><b>订单号：</b>{{ orderDetail.order_number }}</span>
        <span class="order-info2"><b>创建时间：</b>{{ orderDetail.add_time }}</span>
        <span class="order-info3"><b>订单状态：</b>{{ orderDetail.order_state }}</span>
      </div>
      <el-table :data="orderDetail.goods" stripe border style="width: 100%">
        <el-table-column prop="goods_id" label="商品id" width="100"> </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="width"> </el-table-column>
        <el-table-column label="商品图片" width="130">
          <template v-slot="{ row }">
            <el-image style="width: 50px; height: 50px" :src="row.goods_small_logo"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品价格" width="130">
          <template v-slot="{ row }">
            <span>{{ row.goods_price | tofixed }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goods_count" label="商品数量" width="130"> </el-table-column>
      </el-table>
      <div class="order-info">
        <span class="order-info1"
          >共<b> {{ orderDetail.category_count }} </b>类 <b> {{ orderDetail.goods_count }} </b>个</span
        >
        <span class="order-info2"><b>订单总金额：</b>{{ orderDetail.price | tofixed }}</span>
        <span class="order-info3"> </span>
      </div>
      <div class="order-info">
        <span class="order-info1"><b>收货人：</b>{{ orderDetail.consignee }}</span>
        <span class="order-info2"><b>电话：</b>{{ orderDetail.phone_number }}</span>
        <span class="order-info3"><b>收货地址：</b>{{ orderDetail.address }}</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  data() {
    return {
      formData: {
        username: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名' }]
      },
      showDialog: false, //控制查看订单详情dialog弹框的显示与隐藏
      orderDetail: [] //订单详情信息
    }
  },
  beforeDestroy() {
    this.clear()
  },
  computed: {
    ...mapState('order', ['userOrders'])
  },
  methods: {
    ...mapMutations('order', ['getUserOrder', 'clearUserOrders']),
    // 通过用户名，获取用户订单数据
    getOrder(username) {
      // 表单验证
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.getUserOrder(username)
        } else {
          this.clearUserOrders()
          return false
        }
      })
    },
    // 清除用户订单数据
    clear() {
      this.formData.username = ''
      this.clearUserOrders()
    },
    // 发货
    async deliverGoods(order_number) {
      const res = await this.$http({ url: '/api/public/v1/admin/delivergoods', data: { order_number }, method: 'post' })
      if (res.meta.status !== 200) return this.$message.error('发货失败')
      this.$message.success(res.meta.msg)
      this.getUserOrder(this.formData.username)
    },
    // 退款
    async returnMoney(order_number, goods) {
      const res = await this.$http({ url: '/api/public/v1/admin/returnmoney', data: { order_number, goods }, method: 'post' })
      if (res.meta.status !== 200) return this.$message.error('退款失败')
      this.$message.success(res.meta.msg)
      this.getUserOrder(this.formData.username)
    },
    // 删除订单
    async deleteOrder(order_number) {
      const res = await this.$http({ url: '/api/public/v1/admin/deleteorder', data: { order_number }, method: 'post' })
      if (res.meta.status !== 200) return this.$message.error('删除订单失败')
      this.$message.success(res.meta.msg)
      this.getUserOrder(this.formData.username)
    },
    // 查看订单详情
    showOrderDetail(row) {
      this.orderDetail = row
      this.showDialog = true
    }
  },
  filters: {
    tofixed(num) {
      return Number(num).toFixed(2)
    }
  }
}
</script>

<style lang="scss" scoped>
.order-info {
  margin: 15px 0;
  .order-info1 {
    display: inline-block;
    width: 25%;
  }
  .order-info2 {
    display: inline-block;
    width: 30%;
  }
  .order-info3 {
    display: inline-block;
    width: 45%;
  }
}
</style>
